import React from 'react'
import { Route, Switch, withRouter } from 'react-router-dom'
import { Layout, Menu, Affix } from '@arco-design/web-react'
import { IconQuestionCircleFill, IconTags, IconUser, IconUserGroup } from '@arco-design/web-react/icon'
import Questions from './Questions'
import Tags from './Tags'
import Users from './Users'
import Companies from './Companies'

const MenuItem = Menu.Item
const Sider = Layout.Sider
const Content = Layout.Content

function Community(props) {
  return (
    <Layout className={'community-layout'}>
      <Sider className={'community-sider'}>
        <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'flex-end', paddingTop: 24 }}>
          <Menu
            className={'community-menu'}
            style={{ width: 100 }}
            defaultSelectedKeys={['questions']}
            onClickMenuItem={(key) => props.history.push('/npe/community/' + key)}
          >
            <MenuItem key='questions'>
              <IconQuestionCircleFill />
              问题
            </MenuItem>
            <MenuItem key='tags'>
              <IconTags />
              标签
            </MenuItem>
            <MenuItem key='users'>
              <IconUser />
              用户
            </MenuItem>
            <MenuItem key='companies'>
              <IconUserGroup />
              企业
            </MenuItem>
          </Menu>
        </div>
      </Sider>
      <Content className={'community-content'}>
        <Layout>
          <div className={'community-content-wrapper'}>
            <Switch>
              <Route path='/npe/community' exact component={Questions}></Route>
              <Route path='/npe/community/questions' component={Questions}></Route>
              <Route path='/npe/community/tags' component={Tags}></Route>
              <Route path='/npe/community/users' component={Users}></Route>
              <Route path='/npe/community/companies' component={Companies}></Route>
            </Switch>
          </div>
          <Sider className={'community-content-sider'}>Sider</Sider>
        </Layout>
      </Content>
    </Layout>
  )
}

export default withRouter(Community)
